<template>
  <div class="mod-menu main-container box">
    <div class="left">
      <div
        :class="['menu', activeMenu == '1' ? 'active' : '']"
        @click="() => { activeMenu = 1; getDataList() }"
      >
        免费版
      </div>
      <div
        :class="['menu', activeMenu == '2' ? 'active' : '']"
        @click="() => { activeMenu = 2; getDataList() }"
      >
        基础版
      </div>
      <div
        :class="['menu', activeMenu == '3' ? 'active' : '']"
        @click="() => { activeMenu = 3; getDataList() }"
      >
        标准版
      </div>
    </div>
    <!-- 表格 -->
    <div class="table-con shop-menu-table right">
      <el-table
        :data="dataList"
        header-cell-class-name="table-header"
        style="width: 100%;"
        row-key="menuId"
      >
        <el-table-column
          prop="name"
          tree-key="menuId"
          width="260"
          :label="$t('publics.name')"
        />
        <el-table-column
          header-align="center"
          align="center"
          :label="$t('sys.icon')"
        >
          <template #default="scope">
            <svg-icon
              v-if="scope.row.icon"
              style="stroke: #8A979E !important;color: #8A979E"
              :name="scope.row.icon || ''"
              :icon-class="'icon-' + scope.row.icon"
            />
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          :label="$t('sysManagement.type')"
        >
          <template #default="scope">
            <span v-if="scope.row.type === 0">{{ $t('sys.catalog') }}</span>
            <span v-if="scope.row.type === 1">{{ $t('sys.menu') }}</span>
            <span v-if="scope.row.type === 2">{{ $t('sys.button') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="hidden"
          :label="$t('sys.isHidden')"
        >
          <template #default="scope">
            <span v-if="scope.row.hidden">{{ $t('sys.yes') }}</span>
            <span v-else>{{ $t('sys.no') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNum"
          :label="$t('hotSearch.seq')"
        />
        <el-table-column
          prop="url"
          width="150"
          :show-overflow-tooltip="true"
          :label="$t('sys.menuUrl')"
        >
          <template #default="scope">
            <span>{{ scope.row.url || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="perms"
          width="150"
          :show-overflow-tooltip="true"
          :label="$t('sys.authorization')"
        >
          <template #default="scope">
            <span>{{ scope.row.perms || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          width="150"
          :label="$t('sys.operation')"
        >
          <template #default="scope">
            <div class="text-btn-con">
              <div
                class="default-btn text-btn"
                @click="onAddOrUpdate(scope.row)"
              >
                {{ $t('sysManagement.modify') }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog
      v-model="visible"
      :title="$t('sysManagement.modify')"
      :close-on-click-modal="false"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        label-width="155px"
        @submit.prevent
        @keyup.enter="onSubmit()"
      >
        <el-form-item
          :label="$t('sys.isHidden')"
          prop="hidden"
        >
          <el-select
            v-model="dataForm.hidden"
            :placeholder="$t('user.pleaseSelect')"
          >
            <el-option
              v-for="item in isHidden"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div
            class="default-btn"
            @click="visible = false"
          >
            {{ $t('coupon.cancel') }}
          </div>
          <div
            class="default-btn primary-btn"
            @click="onSubmit(dataFormRef)"
          >
            {{ $t('coupon.confirm') }}
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { treeDataTranslate } from '@/utils/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const activeMenu = ref(1)
const visible = ref(false)
const isHidden = [
  {
    label: $t('sys.yes'),
    value: 1
  },
  {
    label: $t('sys.no'),
    value: 0
  }
]

const dataList = ref([])
const dataListLoading = ref(false)
onMounted(() => {
  getDataList()
})

// 获取数据列表
const getDataList = () => {
  dataList.value = []
  dataListLoading.value = true
  http({
    url: http.adornUrl('/sys/shopMenu/tableByVersion'),
    method: 'get',
    params: http.adornParams({
      mallVersion: activeMenu.value
    })
  }).then(({ data }) => {
    dataList.value = treeDataTranslate(data, 'menuId')
    dataListLoading.value = false
  })
}

const dataForm = ref({})
const onAddOrUpdate = (row) => {
  visible.value = true
  http({
    url: http.adornUrl(`/sys/shopMenu/infoVersion/${row.menuId}`),
    method: 'get',
    params: http.adornParams({
      mallVersion: activeMenu.value
    })
  }).then(({ data }) => {
    dataForm.value = { ...data }
  })
}

const onSubmit = () => {
  http({
    url: http.adornUrl('/sys/shopMenu/updateByIdVersion'),
    method: 'put',
    data: http.adornData({
      ...dataForm.value,
      mallVersion: activeMenu.value
    })
  }).then(() => {
    ElMessage({
      message: $t('publics.operation'),
      type: 'success',
      duration: 1500,
      onClose: () => {
        visible.value = false
        getDataList()
      }
    })
  })
}
</script>

<style lang="scss" scoped>
.box{
  display: flex;

  .left{
    width: 200px;
    padding: 10px;

    .menu{
      line-height: 30px;
      cursor: pointer;
      padding: 0 10px;

      &:hover{
        background: #e7eefb;
      }
    }

    .active{
      background: #e7eefb;
      color: #155bd4;
    }
  }

  .table-con{
    margin: 0;
  }

  .right{
    flex: 1
  }
}
</style>
